<template>
	<view class="mask" @click.stop="close">
		<view class="msg" @click.stop>
			<view class="head">
				<text>通知</text>
				<view class="close" @click.stop="close">
					<image src="/static/close.png" mode=""></image>
				</view>
			</view>
			<!-- <text class="msg-text">大清门园区西侧发生火灾，游客请勿前往</text> -->
			<view>
				<text class="msg-text" style="margin-top: 20upx;">人员走失!!!!</text>
				<text class="msg-text" style="margin-top: 20upx;">大清门园区内于11月24日上午12:32分 走失一名儿童。如有看见请与我们联系！</text>
				<image class="msg-photo" src="/static/banner.png" mode=""></image>
				<text class="msg-text">联系电话：0439-205886</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeMsg();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeMsg();
				//#endif
			}
			
		}
	}
</script>

<style scoped>
	.mask{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.8);
		position: fixed;
		top: 0;
		z-index: 99;
		left: 0;
	}
	.msg{
		width: 596upx;
		height: auto;
		display: table;
		background: #FFFFFF;
		position: fixed;
		border-radius: 30upx;
		left: 80upx;
		top: 400upx;
		padding-bottom: 100upx;
	}
	.head{
		width: 100%;
		height: 70upx;
		position: relative;
	}
	.head text{
		width: 100%;
		position: absolute;
		line-height: 70upx;
		font-size: 30upx;
		z-index: 0;
		text-align: center;
	}
	.close{
		width: 70upx;
		height: 70upx;
		position: absolute;
		right: 0;
	}
	.close image{
		width: 30upx;
		height: 30upx;
		margin: 20upx;
		
	}
	.msg-text{
		margin-top: 80upx;
		font-size: 28upx;
		width: 80%;
		height: auto;
		display: table;
		margin-left: 10%;
		text-align: center;
	}
	.msg-photo{
		width: 264upx;
		height: 240upx;
		margin-left: 166upx;
		margin-right: 166upx;
		margin-top: 20upx;
	}
</style>
